@mieweb/ui 0.9.0 → 0.10.0-dev.1

package/MIGRATION.md

@@ -0,0 +1,112 @@
+# Migration guide
+
+Breaking-change recipes for `@mieweb/ui` consumers. Each section is anchored
+so release notes and dev-console notices can deep-link to it.
+
+## Chat composer
+
+**`MessageComposer` was retired in 0.10.0.** The shared **`ChatComposer`** is
+the single composer across the library — `SuperChat`, `AIChat`, and
+`MessageThread` all mount it internally. If you only used those surfaces, no
+code changes are required (their public props are unchanged); the notes below
+about DOM/selector changes still apply to any CSS or tests that reached into
+the composer.
+
+### Removed exports
+
+| Removed in 0.10.0                            | Replacement                                                                     |
+| -------------------------------------------- | ------------------------------------------------------------------------------- |
+| `MessageComposer`                            | `ChatComposer`                                                                   |
+| `MessageComposerProps`                       | `ChatComposerProps`                                                              |
+| `CharacterCounter`, `CharacterCounterProps`  | none — internal to the retired component (ChatComposer renders its own counter)  |
+| `SendButton`, `SendButtonProps`, `sendButtonVariants` | none — internal to the retired component                                |
+
+Still exported and unchanged: `MentionOption`, `NewMessage`,
+`AttachmentPicker`, `DragDropZone`, `CameraButton`, and the Messaging hooks.
+
+### Prop mapping
+
+Most props transfer 1:1 — `onSend(NewMessage)`, `value` / `onValueChange`,
+`placeholder`, `disabled`, `isSending`, `autoFocus`, `maxLength`,
+`showCharacterCount`, `acceptedFileTypes`, `maxFileSize`, `maxAttachments`,
+`replyTo` / `onCancelReply`, `mentionOptions`, `className`.
+
+| MessageComposer                  | ChatComposer                                                                                                   |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `showAttachmentPicker` (default `true`) | `allowAttachments` (default `true`)                                                                       |
+| `showCameraButton`               | none built in — pass `micSlot={<CameraButton onCapture={(f) => ref.current?.addFiles([f])} />}` (MessageThread's pattern; `addFiles` works even with `allowAttachments={false}`) |
+| `onTypingStart` / `onTypingStop` | none built in — drive them from `useTypingEmulation({ value, onTypingStart, onTypingStop })` (exported from the Messaging module; same 2s-idle state machine) |
+| `inputTrailing` slot             | `micSlot` (rendered in the icon row; `micBehavior` controls visibility)                                         |
+| `variant="minimal"`              | none — ChatComposer has a single card presentation                                                              |
+| `onError(message: string)`       | `onError(message, context?)` — `context.reason` is a stable machine key: `'file-type' \| 'file-size' \| 'attachment-limit' \| 'send-failed'` |
+| `maxLength` default `1600`       | no default cap — pass `maxLength={1600}` to keep the old limit                                                  |
+
+### Failed-send restore semantics (behavior change)
+
+`MessageComposer` restored the typed text itself when `onSend` threw or
+rejected. **`ChatComposer` clears the draft optimistically and delegates
+restore to the host**: a rejection is reported through
+`onError(sendFailedLabel, { reason: 'send-failed' })` and the host restores
+the draft via controlled `value` / `onValueChange`. See `MessageThread.tsx`
+for the reference implementation (epoch-guarded so a stale failure never
+overwrites newer typed input). In both old and new worlds, attachments are
+**not** restaged after a failure.
+
+### Attach flow: paperclip → `+` menu
+
+The inline paperclip button is gone; attaching is behind the `+` menu.
+
+```ts
+// Before — one click on the paperclip:
+page.getByRole('button', { name: 'Attach files' }).click();
+
+// After — open the + menu, then pick the item:
+page.getByRole('button', { name: 'Add to message' }).click(); // + button
+page.getByRole('menuitem', { name: 'Attach files' }).click();
+```
+
+Paste-to-attach still works, and drag-and-drop is now **built in**: the whole
+composer card is a drop target (overlay text "Drop files here"). Hosts no
+longer need their own `DragDropZone` around the composer — page-level drop
+zones can forward files through `ChatComposerHandle.addFiles()`.
+
+### DOM / selector anchors
+
+`data-slot` renames (old rows without a counterpart were internal wrappers
+with no replacement):
+
+| MessageComposer slot        | ChatComposer slot              |
+| --------------------------- | ------------------------------ |
+| `message-composer` (root)   | `chat-composer` (root)         |
+| `composer-input`            | `chat-composer-input`          |
+| `composer-send-button`      | `chat-composer-send-button`    |
+| `composer-attachments`      | `chat-composer-attachments`    |
+| `composer-reply-preview`    | `chat-composer-reply-preview`  |
+| `composer-char-count`       | `chat-composer-char-count`     |
+| `composer-input-trailing`   | `chat-composer-mic-slot`       |
+| `composer-input-area`, `composer-input-wrapper` | — (card layout: `chat-composer-card`) |
+
+New slots without an old counterpart: `chat-composer-add-button`,
+`chat-composer-cancel-reply`, `chat-composer-mic-button`,
+`chat-composer-stop-button`, `chat-composer-readonly`,
+`chat-composer-selectors`, `chat-composer-agent-trigger`.
+
+The shared @mention listbox keeps its `composer-mention-list` default slot in
+standalone use; ChatComposer renders it as `chat-composer-mention-list`.
+
+Accessible-name changes (all overridable via label props):
+
+| Element        | Before               | After (default)                          |
+| -------------- | -------------------- | ---------------------------------------- |
+| Textarea       | `Message`            | `Message input` (`inputLabel`)           |
+| Send button    | `Send message` / `Sending message` | `Send message` / `Sending message…` (`sendLabel` / `sendingLabel`) |
+| Attach control | `Attach files` (paperclip) | `Add to message` (+ menu) → `Attach files` (menu item) |
+
+### `composerProps` on AIChat
+
+`AIChat`'s `composerProps` is now `Partial<ChatComposerProps>` (it forwards to
+the internal `ChatComposer`). Legacy `MessageComposerProps`-era keys —
+`showAttachmentPicker`, `showCameraButton`, `onTypingStart` / `onTypingStop`,
+`inputTrailing`, `onSend`, controlled `value` / `onValueChange` — are still
+accepted and mapped for compatibility, but new code should use the
+`ChatComposerProps` names directly.

package/agent/mieweb-ui.instructions.md

@@ -22,7 +22,8 @@ When asked to create a table, data grid, or any tabular data view:
 
 ```tsx
 import { DataVisNitroSource, DataVisNitroGrid } from '@mieweb/ui/datavis';
-// Peer deps: npm install @mieweb/datavis datavis-ace
+// Self-contained entry: @mieweb/datavis is bundled in and datavis-ace ships as
+// a dependency of @mieweb/ui — no extra installs needed to use these.
 ```
 
 ## Rule 2: Buttons belong in a ButtonGroup

package/dist/{Animated-Cs-naa2g.d.cts → Animated-XmH6k8pZ.d.cts}

@@ -17,7 +17,17 @@ import * as React from 'react';
  *   exiting back to `closed` (a modal).
  */
 /** Named animation recipes shared by components. */
-type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel';
+type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel' | 'menu' | 'collapse' | 'toast' | 'fade' | 'pop';
+/**
+ * A physical edge, already resolved from any logical (`start`/`end`) position
+ * and from writing direction.
+ *
+ * Presets that move an element along an axis take one of these as `custom`.
+ * Resolution is the component's job, not the preset's: only the component knows
+ * whether its `end` means right or left, and — for anything anchored — which
+ * side it actually landed on after flipping away from a viewport edge.
+ */
+type MotionEdge = 'top' | 'bottom' | 'left' | 'right';
 /**
  * A variant value. Either a plain target object or a function of the element's
  * `custom` value — the latter lets a single preset adapt to context, e.g. a
@@ -35,7 +45,10 @@ interface MotionPresetDefinition {
  * `custom` contract per preset:
  *
  * - `drawerStart` — `boolean`, whether the document direction is RTL.
- * - `overlay`, `modalContent`, `sidebarLabel` — unused.
+ * - `menu`, `toast` — a {@link MotionEdge}, already resolved from logical
+ *   position and writing direction by the component.
+ * - `overlay`, `modalContent`, `sidebarLabel`, `collapse`, `fade`, `pop` —
+ *   unused.
  */
 declare const motionPresets: Record<MotionPreset, MotionPresetDefinition>;
 
@@ -172,4 +185,4 @@ declare namespace AnimatedPresence {
     var displayName: string;
 }
 
-export { Animated as A, type MotionPreset as M, AnimatedPresence as a, type AnimatedProps as b, type MotionRuntime as c, type MotionPresenceProps as d, type MotionPresetDefinition as e, type MotionVariant as f, motionPresets as m, useMotionRuntime as u };
+export { Animated as A, type MotionEdge as M, AnimatedPresence as a, type AnimatedProps as b, type MotionPreset as c, type MotionRuntime as d, type MotionPresenceProps as e, type MotionPresetDefinition as f, type MotionVariant as g, motionPresets as m, useMotionRuntime as u };

package/dist/{Animated-Cs-naa2g.d.ts → Animated-XmH6k8pZ.d.ts}

@@ -17,7 +17,17 @@ import * as React from 'react';
  *   exiting back to `closed` (a modal).
  */
 /** Named animation recipes shared by components. */
-type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel';
+type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel' | 'menu' | 'collapse' | 'toast' | 'fade' | 'pop';
+/**
+ * A physical edge, already resolved from any logical (`start`/`end`) position
+ * and from writing direction.
+ *
+ * Presets that move an element along an axis take one of these as `custom`.
+ * Resolution is the component's job, not the preset's: only the component knows
+ * whether its `end` means right or left, and — for anything anchored — which
+ * side it actually landed on after flipping away from a viewport edge.
+ */
+type MotionEdge = 'top' | 'bottom' | 'left' | 'right';
 /**
  * A variant value. Either a plain target object or a function of the element's
  * `custom` value — the latter lets a single preset adapt to context, e.g. a
@@ -35,7 +45,10 @@ interface MotionPresetDefinition {
  * `custom` contract per preset:
  *
  * - `drawerStart` — `boolean`, whether the document direction is RTL.
- * - `overlay`, `modalContent`, `sidebarLabel` — unused.
+ * - `menu`, `toast` — a {@link MotionEdge}, already resolved from logical
+ *   position and writing direction by the component.
+ * - `overlay`, `modalContent`, `sidebarLabel`, `collapse`, `fade`, `pop` —
+ *   unused.
  */
 declare const motionPresets: Record<MotionPreset, MotionPresetDefinition>;
 
@@ -172,4 +185,4 @@ declare namespace AnimatedPresence {
     var displayName: string;
 }
 
-export { Animated as A, type MotionPreset as M, AnimatedPresence as a, type AnimatedProps as b, type MotionRuntime as c, type MotionPresenceProps as d, type MotionPresetDefinition as e, type MotionVariant as f, motionPresets as m, useMotionRuntime as u };
+export { Animated as A, type MotionEdge as M, AnimatedPresence as a, type AnimatedProps as b, type MotionPreset as c, type MotionRuntime as d, type MotionPresenceProps as e, type MotionPresetDefinition as f, type MotionVariant as g, motionPresets as m, useMotionRuntime as u };

package/dist/{CsvBlock-QXXZ7ZUM.cjs → CsvBlock-CVYA3HYS.cjs}

@@ -4,6 +4,7 @@ var chunkAHINB2TP_cjs = require('./chunk-AHINB2TP.cjs');
 require('./chunk-6QKMMKRY.cjs');
 require('./chunk-IINZWUGK.cjs');
 require('./chunk-S5RVSXDV.cjs');
+require('./chunk-EUAMEVVI.cjs');
 
 
 
@@ -11,5 +12,5 @@ Object.defineProperty(exports, "CsvBlock", {
   enumerable: true,
   get: function () { return chunkAHINB2TP_cjs.CsvBlock; }
 });
-//# sourceMappingURL=CsvBlock-QXXZ7ZUM.cjs.map
-//# sourceMappingURL=CsvBlock-QXXZ7ZUM.cjs.map
+//# sourceMappingURL=CsvBlock-CVYA3HYS.cjs.map
+//# sourceMappingURL=CsvBlock-CVYA3HYS.cjs.map

package/dist/{CsvBlock-QXXZ7ZUM.cjs.map → CsvBlock-CVYA3HYS.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"CsvBlock-QXXZ7ZUM.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"CsvBlock-CVYA3HYS.cjs"}

package/dist/{CsvBlock-D7Z6ZCRP.js → CsvBlock-SM4NKSHA.js}

@@ -2,5 +2,6 @@ export { CsvBlock } from './chunk-NHN6A3ZO.js';
 import './chunk-CK3KLRNF.js';
 import './chunk-KREUYVMZ.js';
 import './chunk-TQONQSJO.js';
-//# sourceMappingURL=CsvBlock-D7Z6ZCRP.js.map
-//# sourceMappingURL=CsvBlock-D7Z6ZCRP.js.map
+import './chunk-PX6F3LHL.js';
+//# sourceMappingURL=CsvBlock-SM4NKSHA.js.map
+//# sourceMappingURL=CsvBlock-SM4NKSHA.js.map

package/dist/{CsvBlock-D7Z6ZCRP.js.map → CsvBlock-SM4NKSHA.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"CsvBlock-D7Z6ZCRP.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"CsvBlock-SM4NKSHA.js"}

package/dist/{HtmlPreviewBlock-F5VDM2EN.js → HtmlPreviewBlock-FAMF4W24.js}

@@ -2,5 +2,6 @@ export { HtmlPreviewBlock } from './chunk-EG7XFZ3W.js';
 import './chunk-CK3KLRNF.js';
 import './chunk-KREUYVMZ.js';
 import './chunk-TQONQSJO.js';
-//# sourceMappingURL=HtmlPreviewBlock-F5VDM2EN.js.map
-//# sourceMappingURL=HtmlPreviewBlock-F5VDM2EN.js.map
+import './chunk-PX6F3LHL.js';
+//# sourceMappingURL=HtmlPreviewBlock-FAMF4W24.js.map
+//# sourceMappingURL=HtmlPreviewBlock-FAMF4W24.js.map

package/dist/{HtmlPreviewBlock-F5VDM2EN.js.map → HtmlPreviewBlock-FAMF4W24.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"HtmlPreviewBlock-F5VDM2EN.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"HtmlPreviewBlock-FAMF4W24.js"}

package/dist/{HtmlPreviewBlock-AADG7MVB.cjs → HtmlPreviewBlock-JF454L2L.cjs}

@@ -4,6 +4,7 @@ var chunkIB54SKWB_cjs = require('./chunk-IB54SKWB.cjs');
 require('./chunk-6QKMMKRY.cjs');
 require('./chunk-IINZWUGK.cjs');
 require('./chunk-S5RVSXDV.cjs');
+require('./chunk-EUAMEVVI.cjs');
 
 
 
@@ -11,5 +12,5 @@ Object.defineProperty(exports, "HtmlPreviewBlock", {
   enumerable: true,
   get: function () { return chunkIB54SKWB_cjs.HtmlPreviewBlock; }
 });
-//# sourceMappingURL=HtmlPreviewBlock-AADG7MVB.cjs.map
-//# sourceMappingURL=HtmlPreviewBlock-AADG7MVB.cjs.map
+//# sourceMappingURL=HtmlPreviewBlock-JF454L2L.cjs.map
+//# sourceMappingURL=HtmlPreviewBlock-JF454L2L.cjs.map

package/dist/{HtmlPreviewBlock-AADG7MVB.cjs.map → HtmlPreviewBlock-JF454L2L.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"HtmlPreviewBlock-AADG7MVB.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"HtmlPreviewBlock-JF454L2L.cjs"}

package/dist/{MermaidBlock-6PLITRBZ.js → MermaidBlock-7V5G4K5A.js}

@@ -2,5 +2,6 @@ export { MermaidBlock } from './chunk-ZB54MTMQ.js';
 import './chunk-CK3KLRNF.js';
 import './chunk-KREUYVMZ.js';
 import './chunk-TQONQSJO.js';
-//# sourceMappingURL=MermaidBlock-6PLITRBZ.js.map
-//# sourceMappingURL=MermaidBlock-6PLITRBZ.js.map
+import './chunk-PX6F3LHL.js';
+//# sourceMappingURL=MermaidBlock-7V5G4K5A.js.map
+//# sourceMappingURL=MermaidBlock-7V5G4K5A.js.map

package/dist/{MermaidBlock-6PLITRBZ.js.map → MermaidBlock-7V5G4K5A.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"MermaidBlock-6PLITRBZ.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"MermaidBlock-7V5G4K5A.js"}

package/dist/{MermaidBlock-TQ2O5CLV.cjs → MermaidBlock-FR5SQX4Q.cjs}

@@ -4,6 +4,7 @@ var chunkRSCA5AZW_cjs = require('./chunk-RSCA5AZW.cjs');
 require('./chunk-6QKMMKRY.cjs');
 require('./chunk-IINZWUGK.cjs');
 require('./chunk-S5RVSXDV.cjs');
+require('./chunk-EUAMEVVI.cjs');
 
 
 
@@ -11,5 +12,5 @@ Object.defineProperty(exports, "MermaidBlock", {
   enumerable: true,
   get: function () { return chunkRSCA5AZW_cjs.MermaidBlock; }
 });
-//# sourceMappingURL=MermaidBlock-TQ2O5CLV.cjs.map
-//# sourceMappingURL=MermaidBlock-TQ2O5CLV.cjs.map
+//# sourceMappingURL=MermaidBlock-FR5SQX4Q.cjs.map
+//# sourceMappingURL=MermaidBlock-FR5SQX4Q.cjs.map

package/dist/{MermaidBlock-TQ2O5CLV.cjs.map → MermaidBlock-FR5SQX4Q.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"MermaidBlock-TQ2O5CLV.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"MermaidBlock-FR5SQX4Q.cjs"}

package/dist/{SurveyBlock-W5PSQ62F.js → SurveyBlock-6K2POV7S.js}

@@ -2,5 +2,6 @@ export { SurveyBlock } from './chunk-OSPTA4UR.js';
 import './chunk-CK3KLRNF.js';
 import './chunk-KREUYVMZ.js';
 import './chunk-TQONQSJO.js';
-//# sourceMappingURL=SurveyBlock-W5PSQ62F.js.map
-//# sourceMappingURL=SurveyBlock-W5PSQ62F.js.map
+import './chunk-PX6F3LHL.js';
+//# sourceMappingURL=SurveyBlock-6K2POV7S.js.map
+//# sourceMappingURL=SurveyBlock-6K2POV7S.js.map

package/dist/{SurveyBlock-W5PSQ62F.js.map → SurveyBlock-6K2POV7S.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"SurveyBlock-W5PSQ62F.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"SurveyBlock-6K2POV7S.js"}

package/dist/{SurveyBlock-OYL3VNU5.cjs → SurveyBlock-MCJVWR7H.cjs}

@@ -4,6 +4,7 @@ var chunk5Z6UPVGC_cjs = require('./chunk-5Z6UPVGC.cjs');
 require('./chunk-6QKMMKRY.cjs');
 require('./chunk-IINZWUGK.cjs');
 require('./chunk-S5RVSXDV.cjs');
+require('./chunk-EUAMEVVI.cjs');
 
 
 
@@ -11,5 +12,5 @@ Object.defineProperty(exports, "SurveyBlock", {
   enumerable: true,
   get: function () { return chunk5Z6UPVGC_cjs.SurveyBlock; }
 });
-//# sourceMappingURL=SurveyBlock-OYL3VNU5.cjs.map
-//# sourceMappingURL=SurveyBlock-OYL3VNU5.cjs.map
+//# sourceMappingURL=SurveyBlock-MCJVWR7H.cjs.map
+//# sourceMappingURL=SurveyBlock-MCJVWR7H.cjs.map

package/dist/{SurveyBlock-OYL3VNU5.cjs.map → SurveyBlock-MCJVWR7H.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"SurveyBlock-OYL3VNU5.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"SurveyBlock-MCJVWR7H.cjs"}

package/dist/ag-grid.cjs

@@ -2,6 +2,7 @@
 
 var chunkL7L5S2HO_cjs = require('./chunk-L7L5S2HO.cjs');
 var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+require('./chunk-EUAMEVVI.cjs');
 var React = require('react');
 var agGridReact = require('ag-grid-react');
 var agGridCommunity = require('ag-grid-community');